<template>
  <div id="opened_password_free">
    <div class="top">
      <van-icon @click="toPasswordFree()" name="arrow-left"/>
      <div class="title">开通免密支付</div>
    </div>
    <div class="middle">
      <div class="t">白菜出行微信免密支付</div>
      <div class="m">
        <van-field label="开通账号:" readonly :value="userList.farePhone"/>
        <van-field label="套餐内容:" readonly placeholder="免密付车费,单次最高500元"/>
        <div class="b">
          <van-cell title="优先扣款方式:" value="零钱" label="所选支付方式无法扣款时,将改用账号中其他支付方式"/>
          <van-icon name="arrow"/>
        </div>
      </div>
    </div>
    <div class="opened">
      <van-button round type="info" @click="toOpened()">开通免密支付</van-button>
    </div>
    <div class="bottom">您已阅读并同意<span>《扣款授权通知书》</span></div>
  </div>
</template>

<script>
import {updatePF} from "@/api/purse/purse_home";
import {getUser} from "@/api/purse/user";

export default {
  data() {
    return {
      item: this.$route.query.item,
      userList: [],
      userId: localStorage.getItem("userId"),
    };
  },
  methods: {
    toPasswordFree() {
      this.$router.push("/password_free");
    },
    toOpened() {
      const id = this.item.id;
      updatePF(id).then((res) => {
        if (res.data.code === 1) {
          this.$toast.success("开通成功");
          this.$router.push("/password_free");
        } else {
          this.$toast.fail("开通失败");
        }
      })
    },
    getUser() {
      getUser(this.userId).then(res => {
        this.userList = res.data;
      })
    }
  },
  created() {
    this.getUser();
  }
}
</script>

<style>
body {
  background-color: #F3FCFF;

  #opened_password_free {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .top {
      width: 100%;
      height: 66px;
      background-color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      top: 0;

      .van-icon {
        font-size: 26px;
        position: absolute;
        left: 20px;
      }

      .title {
        font-size: 20px;
      }
    }

    .middle {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 66px;

      .t {
        width: 100%;
        height: 66px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        font-weight: bold;
      }

      .m {
        width: 90%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .van-field {
          width: 100%;
          margin-top: 20px;
          background-color: initial;

          .van-field__label {
            font-size: 18px;
            color: black;
            margin-left: 10px;
            font-weight: bold;
          }

          .van-field__control {
            font-size: 18px;
            color: black;
            font-weight: bold;
          }
        }

        .b {
          width: 100%;
          background-color: initial;
          display: flex;
          align-items: center;
          justify-content: center;

          .van-cell {
            width: 100%;
            margin-top: 20px;
            background-color: initial;

            .van-cell__label {
              width: 340px;
              font-size: 14px;
            }

            .van-cell__title {
              font-size: 18px;
              color: black;
              margin-left: 10px;
              font-weight: bold;
            }

            .van-cell__value {
              font-size: 16px;
              position: absolute;
              right: 200px;
              color: #2D83FB;
            }
          }

          .van-icon {
            font-size: 20px;
            position: absolute;
            right: 20px;
          }
        }
      }
    }

    .opened {
      width: 360px;
      height: 60px;
      margin: 20px 0;

      .van-button {
        width: 100%;
        height: 70%;
        font-size: 16px;
      }
    }

    .bottom {
      width: 100%;
      height: 66px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #A1ACB8;
      position: fixed;
      bottom: 60px;

      span {
        color: #2D83FB;
        cursor: pointer;
        font-weight: bold;
      }
    }
  }
}
</style>